<template>
  <div class="page fill" >
    <div class="left" id="stencil"></div>
    <div class="right" id="graph">
    </div>
  </div>
</template>
<script>
import {X6GraphUtil} from './cfg/index'

let x6GraphUtil = new X6GraphUtil()
const data = {
  // 节点
  nodes: [
    {
      id: 'node1', // String，可选，节点的唯一标识
      x: 40,       // Number，必选，节点位置的 x 值
      y: 40,       // Number，必选，节点位置的 y 值
      width: 80,   // Number，可选，节点大小的 width 值
      height: 40,  // Number，可选，节点大小的 height 值
      label: 'hello', // String，节点标签
    },
    {
      id: 'node2', // String，节点的唯一标识
      x: 160,      // Number，必选，节点位置的 x 值
      y: 180,      // Number，必选，节点位置的 y 值
      width: 80,   // Number，可选，节点大小的 width 值
      height: 40,  // Number，可选，节点大小的 height 值
      label: 'world', // String，节点标签
    },
  ],
  // 边
  edges: [
    {
      source: 'node1', // String，必须，起始节点 id
      target: 'node2', // String，必须，目标节点 id
    },
  ],
};
export default {
  data(){
    return {
      graph:null
    }
  },
  created(){

  },
  mounted(){
    this.$nextTick(()=>{
      this.graph = x6GraphUtil.createDefaultGraph("graph","stencil");
    })

  }
}

</script>
<style scoped lang="less">
.left,.right{
  display: inline-block;
}
.left{
  width: 180px;
  height: 100%;
  position: relative;
}
.right{
  width: calc(100% - 180px);
  height: 100%;
}
</style>